<template>
  <div class="course-add addButton">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item>教务管理</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/education/examination/list' }">考试管理</el-breadcrumb-item>
      <el-breadcrumb-item>添加考试</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="form">
      <el-form ref="form" :model="form" label-width="120px" size="small" :rules="rules">
        <el-form-item label="选择考季:" prop="season">
          <el-select v-model="form.season" clearable placeholder="请选择考季" style="width:230px">
            <el-option
              v-for="item in seasonList"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="班级:" prop="classId">
          <el-select v-model="form.classId" clearable placeholder="请选择班级" style="width:230px">
            <el-option
              v-for="item in classList"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="选择科目:" prop="subject">
          <el-select v-model="form.subject" clearable placeholder="请选择科目" style="width:230px">
            <el-option
              v-for="item in subjectList"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="考试课程名称:" prop="name">
          <el-input v-model="form.name" placeholder="请输入考试课程名称" style="width:230px"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button style="background:#ff8b00;color:#fff" @click="onSubmit">提交</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>

</template>
<script>
export default {
  mounted() {
    this.getClassList()
    this.getSeasonList()
    this.getSubjectList()
  },
  data() {
    return {
      form: {
        season: "",
        classId: "",
        subject: "",
        name: ""
      },
      classList: [],
      subjectList: [],
      seasonList: [],
      rules: {
        season: [
          { required: true, message: "不能为空", trigger: "change" },
        ],
        classId: [
          { required: true, message: "不能为空", trigger: "change" },
        ],
        subject: [
          { required: true, message: "不能为空", trigger: "change" },
        ],
        name: [
          { required: true, message: "不能为空", trigger: "change" },
        ],
      },

      isDisabled: false,
    };
  },
  methods: {
    getClassList() {
      let params = {
        pageNum: 1,
        pageSize: 100,
        name: ""
      };
      this.$api.education.classList(params)
        .then((res) => {
          if (res.code === 200) {
            this.classList = res.data.list;
          }
        });
    },
    getSubjectList() {
      this.$api.education.subjectList({
        pageNum: 1,
        pageSize: 100
      }).then((res) => {
        if (res.code === 200) {
          this.subjectList = res.data.list;
        }
      });
    },
    getSeasonList() {
      let data = {
        name: "",
        pageSize: 100,
        pageNum: 1,
      };
      console.log(data, "请求参数");
      this.$api.education.getSeasonList(data)
        .then((res) => {
          if (res.code === 200) {
            let data = res.data;
            this.seasonList = data.list;
          }
        });
    },
    onSubmit() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          this.$api.education.examAdd(this.form)
            .then((res) => {
              console.log(res);
              this.$message.success("添加成功");
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
};
</script>
<style scoped>
.course-add {
  padding: 30px;
}

.course-add .form {
  max-width: 700px;
  margin: 30px 0px;
}

.course-add .img {
  position: absolute;
  top: 50%;
  left: 50%;
  max-width: 360px;
  max-height: 180px;
  transform: translate(-50%, -50%);
  z-index: 0;
}
</style>
